<template>
    <div id="container">
      <div id="viewDiv"></div> 
    </div>
  </template>
  
  <script setup>
  import {onMounted} from 'vue'
  import Map from '@arcgis/core/Map'
  import MapView from '@arcgis/core/views/MapView'
  import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
  import Legend from '@arcgis/core/widgets/Legend'
  var map,view,layer,legend
  
  layer = new FeatureLayer({
    url:"http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/WorldCities/FeatureServer/0", 
    title: "全球大城市",
    outFields: ["*"],
    renderer: {//创建渲染器对象
        type: "simple", // 设置渲染器类型
        symbol: {//创建简单标签符号对象
            type: "simple-marker",
            color: "palegreen",
            outline: {
                color: "seagreen",
                width: 0.5
            }
        },
        visualVariables:{//创建视觉变量对象SizeVariable
            type: "size", //设置渲染器类型,可选:"color"|"opacity"|"rotation"|"size"
            field: "pop",//设置绑定字段,从该字段获取参考值
            legendOptions: {//设置图例参数,这里设置了标题
                title: "人口数量"
            },
            stops:[//手动设置停靠点,这里对取值按照数值区间进行了分类,分类的目的并不是设置唯一值,而是方便显示图例,符号的实际显示大小是按比例进行了插值
                { value:1000000,size:8,label:"一档"},
                { value:4000000,size:13,label:"二档"},
                { value:7000000,size:18,label:"三挡"},
                { value:10000000,size:23,label:"四挡"},
            ]
        }
      }
  })
  onMounted(()=>{
    map = new Map({
        basemap: "dark-gray-vector",
        layers:[layer]
    })
    view = new MapView({
        container: "viewDiv", map: map, center: [170, 0], zoom: 2
    })
    const legend = new Legend({
        view: view,
        layerInfos: [{
            layer: layer
        }]
    })
    view.ui.add(legend, "bottom-left")
  })
  </script>
  
  <style scoped>
  #viewDiv,#container{
    height:100%;width:100%;padding:0;margin:0;
  }
  </style>
  